import React from 'react';
import './CommonTools.css';

const tools = [
  {
    title: '企业图库',
    desc: '亿级图库/企业会员专属',
    icon: '/icons/enterprise.png', // 你可以用本地图片或SVG
    tag: '优选推荐',
    tagType: 'recommend',
    active: true,
  },
  {
    title: '政务图库',
    desc: '行政事业单位专用模板',
    icon: '/icons/government.png',
  },
  {
    title: '在线设计',
    desc: '不会PS，也能做设计',
    icon: '/icons/design.png',
    tag: 'HOT',
    tagType: 'hot',
  },
  {
    title: '智能抠图',
    desc: '一键AI智能抠图神器',
    icon: '/icons/ai-cutout.png',
  },
  {
    title: 'AI绘画',
    desc: '人工智能生成图片',
    icon: '/icons/ai-draw.png',
  },
  {
    title: '热门专题',
    desc: '精选设计模板、视频专题',
    icon: '/icons/hot-topic.png',
  },
];

const CommonTools: React.FC = () => (
  <div className="common-tools">
    {tools.map((tool) => (
      <div className={`tool-card${tool.active ? ' active' : ''}`} key={tool.title}>
        <div className="tool-icon">
          <img src={tool.icon} alt={tool.title} />
        </div>
        <div className="tool-info">
          <div className="tool-title">
            {tool.title}
            {tool.tag && (
              <span className={`tool-tag ${tool.tagType || ''}`}>{tool.tag}</span>
            )}
          </div>
          <div className="tool-desc">{tool.desc}</div>
        </div>
      </div>
    ))}
  </div>
);

export default CommonTools;
